<template>
    <div style="height: 100%; width: 100%;">

        <div class="top">
            <div class="box">
                <dv-border-box-7 :color="['#0b153d', '#00ffff']">
                    <div style="padding: 20px;">
                        <div class="tit">
                            <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                            累计办件量
                        </div>
                        <div class="content">
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">今日办件数</p>
                                        <p> <b><span style="font-size: 26px;">{{dayprocess}}</span></b> 件</p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">当月办件数</p>
                                        <p> <b><span style="font-size: 26px;">{{mounthprocess}}</span></b> 件</p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">全年办件总数</p>
                                        <p> <b><span style="font-size: 26px;">{{yearprocess}}</span></b> 件</p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                        </div>
                    </div>
                </dv-border-box-7>
            </div>
            <div class="box">
                <dv-border-box-7 :color="['#0b153d', '#00ffff']">
                    <div style="padding: 20px;">
                        <div class="tit">
                            <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                            窗口排队取号情况
                        </div>
                        <div class="content">
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">取号人数</p>
                                        <p> <b><span style="font-size: 26px;">{{takenum}}</span></b> 人</p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">等待人数</p>
                                        <p> <b><span style="font-size: 26px;">{{waitnum}}</span></b> 人</p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">平均办理时长</p>
                                        <p> <b><span style="font-size: 26px;">14</span></b>min</p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">平均等待时长</p>
                                        <p> <b><span style="font-size: 26px;">9</span></b>min</p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                        </div>
                    </div>
                </dv-border-box-7>
            </div>
            <div class="box">
                <dv-border-box-7 :color="['#0b153d', '#00ffff']">
                    <div style="padding: 20px;">
                        <div class="tit">
                            <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                            延时预约服务情况
                        </div>
                        <div class="content">
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">本周延时预约数</p>
                                        <p> <b><span style="font-size: 26px;">{{weekdelay}}</span></b></p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">本月延时预约数</p>
                                        <p> <b><span style="font-size: 26px;">{{mounthdelay}}</span></b></p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                            <div>
                                <dv-border-box-12>
                                    <div>
                                        <p style="color: #00ffff;">本年延时预约数</p>
                                        <p> <b><span style="font-size: 26px;">{{yeardelay   }}</span></b></p>
                                    </div>
                                </dv-border-box-12>
                            </div>
                        </div>
                    </div>
                </dv-border-box-7>
            </div>
        </div>
        <div class="bottom">
            <div class="box">
                <div class="top">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                窗口办件统计
                            </div>
                            <div class="content" style="display: flex; justify-content: space-around;">
                                <div id="main3" style="width: 160px; height: 140px; background-color: #0d1743; "></div>
                                <div id="main4" style="width: 160px; height: 140px; background-color: #0d1743; "></div>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
                <div class="center">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                年度每月办件量
                            </div>
                            <div class="content">
                                <div id="main1" style="width: 520px; height: 160px; background-color: #0d1743; "></div>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
                <div class="bom">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                年度每月办件量
                            </div>
                            <div class="content">
                                <table border="1" style="border: #4795e3;" width="100%" cellpadding="0" cellspacing="0">
                                    <tr align="center" style="color: #4795e3; background-color: #0a214b;">
                                        <td width="17%">办件编号</td>
                                        <td width="17%">受理部门</td>
                                        <td width="17%">项目名称</td>
                                        <td width="17%">受理时间</td>
                                        <td width="17%">完成时间</td>
                                        <td>办理状态</td>
                                    </tr>
                                    <tr align="center">
                                        <td width="17%">001</td>
                                        <td width="17%">部门一</td>
                                        <td width="17%">项目A</td>
                                        <td width="17%">01/01</td>
                                        <td width="17%">01/02</td>
                                        <td>办结</td>
                                    </tr>
                                    <tr align="center">
                                        <td width="17%">002</td>
                                        <td width="17%">部门二</td>
                                        <td width="17%">项目B</td>
                                        <td width="17%">01/01</td>
                                        <td width="17%">01/02</td>
                                        <td>办结</td>
                                    </tr>
                                    <tr align="center">
                                        <td width="17%">003</td>
                                        <td width="17%">部门三</td>
                                        <td width="17%">项目C</td>
                                        <td width="17%">01/01</td>
                                        <td width="17%">01/02</td>
                                        <td>办结</td>
                                    </tr>
                                    <tr align="center">
                                        <td width="17%">004</td>
                                        <td width="17%">部门四</td>
                                        <td width="17%">项目D</td>
                                        <td width="17%">01/01</td>
                                        <td width="17%">01/02</td>
                                        <td>办结</td>
                                    </tr>
                                    <tr align="center">
                                        <td width="17%">005</td>
                                        <td width="17%">部门五</td>
                                        <td width="17%">项目E</td>
                                        <td width="17%">01/01</td>
                                        <td width="17%">01/02</td>
                                        <td>办结</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
            </div>
            <div class="box">
                <div class="topcen">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                取号趋势分布统计
                            </div>
                            <div class="content">
                                <div id="main2" style="width: 540px; height: 240px; background-color: #0d1743; "></div>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
                <div class="bomcen">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                大厅实时运行明细分析
                            </div>
                            <div class="content">
                                <table border="1" style="border: #4795e3;" width="100%" cellpadding="0" cellspacing="0">
                                    <tr align="center" style="color: #4795e3; background-color: #0a214b;">
                                        <td width="25%">窗口</td>
                                        <td width="26%">业务名称</td>
                                        <td width="25%">当前办理号</td>
                                        <td width="24%">等待人数</td>
                                    </tr>
                                    <tr align="center">
                                        <td>1号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0001</td>
                                        <td>0</td>
                                    </tr>
                                    <tr align="center">
                                        <td>2号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0002</td>
                                        <td>2</td>
                                    </tr>
                                    <tr align="center">
                                        <td>3号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0003</td>
                                        <td>3</td>
                                    </tr>
                                    <tr align="center">
                                        <td>1号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0004</td>
                                        <td>0</td>
                                    </tr>
                                    <tr align="center">
                                        <td>4号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0005</td>
                                        <td>6</td>
                                    </tr>
                                    <tr align="center">
                                        <td>1号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0006</td>
                                        <td>0</td>
                                    </tr>
                                    <tr align="center">
                                        <td>2号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0007</td>
                                        <td>11</td>
                                    </tr>
                                    <tr align="center">
                                        <td>3号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0008</td>
                                        <td>0</td>
                                    </tr>
                                    <tr align="center">
                                        <td>1号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0009</td>
                                        <td>2</td>
                                    </tr>
                                    <tr align="center">
                                        <td>4号窗口</td>
                                        <td>这里是业务名称...</td>
                                        <td>A0011</td>
                                        <td>3</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
            </div>
            <div class="box">
                <div class="toprig">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                本年服务满意度情况
                            </div>
                            <div class="content">
                                <div>
                                    <p style="font-size: 40px; margin: 30px 0;"> <b>97.87%</b> </p>
                                    <p style="color: #4896e5; text-align: center;">平均满意率</p>
                                </div>
                                <div style="display: flex; justify-content: space-around; position: relative;">
                                    <div class="issctis">
                                        <p>1234</p>
                                        <div
                                            style="width: 20px; height: 20px; background-color: #02d6eb; border-radius: 50%;">
                                        </div>
                                        <p style=" color: #02d6eb;">非常满意</p>
                                    </div>
                                    <div class="issctis">
                                        <p>123</p>
                                        <div
                                            style="width: 20px; height: 20px; background-color: #face13; border-radius: 50%;">
                                        </div>
                                        <p style=" color: #face13;">满意</p>
                                    </div>
                                    <div class="issctis">
                                        <p>123</p>
                                        <div
                                            style="width: 20px; height: 20px; background-color: #f164ff; border-radius: 50%;">
                                        </div>
                                        <p style=" color: #f164ff;">基本满意</p>
                                    </div>
                                    <div class="issctis">
                                        <p>12</p>
                                        <div
                                            style="width: 20px; height: 20px; background-color: #00c800; border-radius: 50%;">
                                        </div>
                                        <p style=" color: #00c800;">不满意</p>
                                    </div>
                                    <div class="issctis">
                                        <p>9</p>
                                        <div
                                            style="width: 20px; height: 20px; background-color: #e6385d; border-radius: 50%;">
                                        </div>
                                        <p style=" color: #e6385d;">非常不满意</p>
                                    </div>
                                    <div
                                        style=" z-index: 1; width: 80%; height: 2px; background-color: #00ffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
                <div class="centerrig">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                上月各窗口绩效考核排名
                            </div>
                            <div class="content">
                                <div style="display: flex; border: 2px #0150bd solid; margin-bottom: 5px; ">
                                    <div class="rank"> <b>1</b></div>
                                    <div class="per">
                                        <span>窗口：1号窗口</span>
                                        <span>部门：这是部门名称</span>
                                        <span>考核分数：10分</span>
                                    </div>
                                </div>
                                <div style="display: flex; border: 2px #0150bd solid; margin-bottom: 5px; ">
                                    <div class="rank"> <b>2</b></div>
                                    <div class="per">
                                        <span>窗口：1号窗口</span>
                                        <span>部门：这是部门名称</span>
                                        <span>考核分数：10分</span>
                                    </div>
                                </div>
                                <div style="display: flex; border: 2px #0150bd solid; margin-bottom: 5px; ">
                                    <div class="rank"> <b>3</b></div>
                                    <div class="per">
                                        <span>窗口：1号窗口</span>
                                        <span>部门：这是部门名称</span>
                                        <span>考核分数：10分</span>
                                    </div>
                                </div>
                                <div style="display: flex; border: 2px #0150bd solid; ">
                                    <div class="rank"> <b>4</b></div>
                                    <div class="per">
                                        <span>窗口：1号窗口</span>
                                        <span>部门：这是部门名称</span>
                                        <span>考核分数：10分</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
                <div class="bomrig">
                    <dv-border-box-7 :color="['#0b153d', '#00ffff']" style="border: 1px solid #4795e3;">
                        <div style="padding: 20px;">
                            <div class="tit">
                                <img src="../../../public/Government/1.png" style="width: 20px; height: 20px;">
                                上月优秀员工
                            </div>
                            <div class="content">
                                <div class="worker">
                                    <p>
                                        <img src="../../../public/Government/张三.png" alt="">
                                    </p>
                                    <p>部门：部门一</p>
                                    <p>工号：00001</p>
                                    <p>姓名：张三</p>
                                </div>
                                <div class="worker">
                                    <p>
                                        <img src="../../../public/Government/李四.png" alt="">
                                    </p>
                                    <p>部门：部门一</p>
                                    <p>工号：00002</p>
                                    <p>姓名：李四</p>
                                </div>
                                <div class="worker">
                                    <p>
                                        <img src="../../../public/Government/老六.png" alt="">
                                    </p>
                                    <p>部门：部门一</p>
                                    <p>工号：00003</p>
                                    <p>姓名：老六</p>
                                </div>
                                <div class="worker">
                                    <p>
                                        <img src="../../../public/Government/周中.png" alt="">
                                    </p>
                                    <p>部门：部门一</p>
                                    <p>工号：00004</p>
                                    <p>姓名：周中</p>
                                </div>
                            </div>
                        </div>
                    </dv-border-box-7>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    onMounted,
    ref,
    onUnmounted
} from 'vue'

import * as echarts from 'echarts';

const dayprocess =ref(1046)
const mounthprocess =ref(4996)
const yearprocess =ref(346403)
const takenum = ref(511)
const waitnum = ref(509)
const weekdelay = ref(419)
const mounthdelay = ref(5239)
const yeardelay = ref(245676)

const time =  setInterval(() => {
    dayprocess.value++
    mounthprocess.value++
    yearprocess.value++
    takenum.value++
    weekdelay.value++
    mounthdelay.value++
    yeardelay.value++
    if(waitnum.value>0){
        waitnum.value--
    }
}, 1000)

onUnmounted(() => {
    clearInterval(time)
})

onMounted(() => {

    var chartDom1 = document.getElementById('main1');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    option1 = {
        xAxis: {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: 'white'
            },
            // 去除刻度线
            axisTick: {
                show: false
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
            splitLine: {
                lineStyle: {
                    color: '#80c0e0',
                    type: 'dashed'
                }
            },
            // 去除刻度线
            axisTick: {
                show: false
            }
        },
        series: [
            {
                data: [150, 90, 147, 93, 130, 80, 110, 78, 100, 127, 180, 112],
                type: 'bar',
                barWidth: '60%'
            }
        ],
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 1, color: '#2954ef' }
            ])
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option1 && myChart1.setOption(option1);

    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    option2 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: 'white'
            },
            // 去除刻度线
            axisTick: {
                show: false
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
            splitLine: {
                lineStyle: {
                    color: '#80c0e0',
                    type: 'dashed'
                }
            },
            // 去除刻度线
            axisTick: {
                show: false
            }
        },
        series: [
            {
                data: [650, 890, 547, 693, 230, 680, 610, 678, 400,],
                type: 'line',
                areaStyle: {}
            }
        ],
        areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: '#711e58'
                },
                {
                    offset: 1,
                    color: '#111742'
                }
            ])
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option2 && myChart2.setOption(option2);

    var chartDom3 = document.getElementById('main3');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
        series: [
            {
                type: 'gauge',
                radius: '70%',
                center: ['50%', '50%'],
                startAngle: 225, // 起始角度（从左开始）
                endAngle: -45,     // 结束角度（到右结束）
                min: 0,
                max: 100,
                splitNumber: 5, // 分割段数（0、20、40、60、80、100）
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.2, '#f44336'],   // 0-20 红色
                            [0.4, '#ffab00'],   // 20-40 橙色
                            [0.6, '#ba68c8'],   // 40-60 紫色
                            [0.8, '#4dd0e1'],   // 60-80 青色
                            [1, '#8bc34a']      // 80-100 绿色
                        ]
                    }
                },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                    distance: -50,
                    color: '#ffffff',
                    fontSize: 14
                },
                pointer: {
                    length: '60%',
                    width: 6,
                    itemStyle: { color: '#ffffff' }
                },
                title: { show: false },
                detail: { show: false },
                // 中心文字“满意度”
                anchorName: '满意度',
                anchor: {
                    show: true,
                    nameTextStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    nameLocation: 'bottom',
                    nameDistance: 10
                },
                // 仪表盘数据（指针指向约70的位置，可根据需求调整）
                data: [{ value: 95 }]
            }
        ],
        axisPointer: {
            show: false
        }
    };

    option3 && myChart3.setOption(option3);


    var chartDom4 = document.getElementById('main4');
    var myChart4 = echarts.init(chartDom4);
    var option4;

    option4 = {
        series: [
            {
                type: 'gauge',
                radius: '70%',
                center: ['50%', '50%'],
                startAngle: 225, // 起始角度（从左开始）
                endAngle: -45,     // 结束角度（到右结束）
                min: 0,
                max: 100,
                splitNumber: 5, // 分割段数（0、20、40、60、80、100）
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.2, '#f44336'],   // 0-20 红色
                            [0.4, '#ffab00'],   // 20-40 橙色
                            [0.6, '#ba68c8'],   // 40-60 紫色
                            [0.8, '#4dd0e1'],   // 60-80 青色
                            [1, '#8bc34a']      // 80-100 绿色
                        ]
                    }
                },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                    distance: -50,
                    color: '#ffffff',
                    fontSize: 14
                },
                pointer: {
                    length: '60%',
                    width: 6,
                    itemStyle: { color: '#ffffff' }
                },
                title: { show: false },
                detail: { show: false },
                // 中心文字“满意度”
                anchorName: '满意度',
                anchor: {
                    show: true,
                    nameTextStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    nameLocation: 'bottom',
                    nameDistance: 10
                },
                // 仪表盘数据（指针指向约70的位置，可根据需求调整）
                data: [{ value: 95 }]
            }
        ],
        axisPointer: {
            show: false
        }
    };

    option4 && myChart4.setOption(option4);
})

</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.top {
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: space-around;
    margin: 10px 0 0;

    .box {
        width: 30%;
        height: 160px;
        background-color: #0d1743;

        .tit {
            color: #00ffff;
            border-bottom: 1px solid #00ffff;
            margin-bottom: 20px;
        }

        .content {
            display: flex;
            justify-content: space-around;

            div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                width: 90%;
                height: 80px;
                // background-color: #00ffff;
            }
        }
    }
}

.bottom {
    width: 100%;
    height: 740px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .box {
        width: 30%;
        height: 700px;


        .top {
            width: 100%;
            height: 220px;
            display: flex;
            justify-content: space-around;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
                margin-bottom: 20px;
            }
        }

        .topcen {
            width: 100%;
            height: 320px;
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
                margin-bottom: 20px;
            }
        }

        .toprig {
            width: 100%;
            height: 180px;
            display: flex;
            justify-content: space-around;
            margin: 10px 0;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
                margin-bottom: 20px;
            }

            .content {
                display: flex;

                .issctis {
                    width: 80px;
                    height: 100px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    z-index: 2;
                }
            }
        }

        .center {
            width: 100%;
            height: 220px;
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
            }
        }

        .centerrig {
            width: 100%;
            height: 260px;
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
                margin-bottom: 10px;
            }

            .content {
                .rank {
                    width: 30px;
                    height: 40px;
                    background-color: #0150bd;
                    color: white;
                    font-size: 28px;
                    text-align: center;
                    line-height: 40px;
                }

                .per {
                    width: 500px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                }
            }
        }

        .bom {
            width: 100%;
            height: 220px;
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
                margin-bottom: 20px;
            }
        }

        .bomcen {
            width: 100%;
            height: 360px;
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
                margin-bottom: 20px;
            }
        }

        .bomrig {
            width: 100%;
            height: 220px;
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            background-color: #0d1743;

            .tit {
                color: #00ffff;
                border-bottom: 1px solid #00ffff;
                margin-bottom: 10px;
            }

            .content {
                width: 100%;
                display: flex;
                justify-content: space-around;

                img {
                    width: 80px;
                    height: 90px;
                }

                font-size: 14px;
            }
        }
    }
}
</style>
